import React from 'react';
import { Field, FieldArray, formValueSelector, reduxForm } from 'redux-form';
import PropTypes from 'prop-types';
import consoleUtils from '../../services/consoleUtils';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import {CALCULATION_REGION} from './../../config';
import './OrderForm.css';

const validate = values => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  }
  if (!values.lastName) {
    errors.lastName = 'Required';
  }
  if (!values.company) {
    errors.company = 'Required';
  }
  if (!values.addressCountry) {
    errors.addressCountry = 'Country required';
  }
  if (!values.addressCity) {
    errors.addressCity = 'City required';
  }
  if (!values.addressStreet) {
    errors.addressStreet = 'Street required';
  }
  if (!values.zipCode) {
    errors.zipCode = 'Required';
  }
  if (!values.phoneNumber) {
    errors.phoneNumber = 'Phone number required';
  }
  // else if (!/\d{4}-\d{3}-\d{4}/g.test(values.phoneNumber)) {
  //   errors.phoneNumber = 'Invalid phone Number, 1234-123-4567'
  // }
  if (!values.emailAddress) {
    errors.emailAddress = 'Required';
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.emailAddress)
  ) {
    errors.emailAddress = 'Invalid email address';
  }
  return errors;
};

const renderField = ({
  input,
  label,
  type,
  className,
  minOrderQty,
  defaultVal,
  meta: { touched, error }
}) => (
  <div className="form-group">
    <label className="col-md-4 control-label">{label}</label>
    <div className="col-md-6">
      <input
        {...input}
        value={input.value || defaultVal}
        type={type}
        placeholder={label}
        className={className ? className : 'form-control input-md'}
      />

      {touched && error && <span>{error}</span>}

      {label === 'Order quantity' && input.value < minOrderQty && (
        <span className="warning"> min quantity {minOrderQty}</span>
      )}
      {label === 'Length' && (input.value < 3 || input.value > 7) && (
        <span className="warning">
          The length should be in the range of 3 to 7 meters
        </span>
      )}
    </div>
  </div>
);

renderField.propTypes = {
  input: PropTypes.node,
  label: PropTypes.string,
  type: PropTypes.string,
  className: PropTypes.string,
  minOrderQty: PropTypes.number,
  defaultVal: PropTypes.string,
  meta: PropTypes.object,
  onChange: PropTypes.func
};

const renderContactField = ({
  input,
  label,
  icon,
  type,
  className,
  defaultVal,
  meta: { touched, error }
}) => (
  <div className={touched && error ? 'form-group has-error' : 'form-group'}>
    <label className="col-md-4 control-label" htmlFor="firstName">
      {label}
    </label>
    <div className="col-md-4">
      <div className="input-group">
        <div className="input-group-addon input-addon">
          <i className={icon}></i>
        </div>
        <input
          {...input}
          value={input.value || defaultVal}
          type={type}
          placeholder={label}
          className={className ? className : 'form-control input-md'}
        />
      </div>
    </div>
    <div className="col-md-4 warning">
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

renderContactField.propTypes = {
  input: PropTypes.node,
  label: PropTypes.string,
  icon: PropTypes.string,
  type: PropTypes.string,
  className: PropTypes.string,
  defaultVal: PropTypes.string,
  meta: PropTypes.object
};

const RenderObjects = ({ objects, checkObjects }) => {
  return (
    <ul className="polyamide-list">
      {objects &&
        objects.map((object, i) => {
          return (
            <li
              className={
                checkObjects && checkObjects[i] && checkObjects[i].checked
                  ? 'list-group-flush'
                  : 'list-group-flush disabled'
              }
              key={i}
            >
              <Field
                name={`objects[${i}].checked`}
                type="checkbox"
                component="input"
                label=""
                className="checkObject"
              />

              <FormattedMessage
                id="calculatePrice.modal.object"
                defaultMessage="Object"
              >
                {value => (
                  <h4>
                    {value}: {object.name}
                  </h4>
                )}
              </FormattedMessage>
              <FormattedMessage
                id="calculatePrice.modal.material"
                defaultMessage="Material"
              >
                {value => (
                  <h3>
                    {value}: {object.userData.material.name}
                  </h3>
                )}
              </FormattedMessage>
              <FormattedMessage
                id="calculatePrice.modal.width"
                defaultMessage="Width"
              >
                {value => (
                  <span>
                    {value}: {Number(object.userData.info.width.toFixed(4))} mm
                  </span>
                )}
              </FormattedMessage>
              <FormattedMessage
                id="calculatePrice.modal.height"
                defaultMessage="Height"
              >
                {value => (
                  <span>
                    {value}: {Number(object.userData.info.height.toFixed(4))} mm
                  </span>
                )}
              </FormattedMessage>
              <FormattedMessage
                id="calculatePrice.modal.area"
                defaultMessage="Area"
              >
                {value => (
                  <span>
                    {value}: {Number(object.userData.info.area.toFixed(4))} mm2
                  </span>
                )}
              </FormattedMessage>
              <FormattedMessage
                id="calculatePrice.modal.weight"
                defaultMessage="Weight"
              >
                {value => (
                  <span>
                    {value}: {Number(object.userData.info.weight).toFixed(4)}{' '}
                    kg/m
                  </span>
                )}
              </FormattedMessage>
              {object.userData.price && (
                <FormattedMessage
                  id="calculatePrice.modal.price"
                  defaultMessage="Unit price"
                >
                  {value => (
                    <span>
                      <b>
                        {value}: {object.userData.price}
                      </b>
                    </span>
                  )}
                </FormattedMessage>
              )}
                { object.userData.price10000 && (
                    <FormattedMessage
                        id="calculatePrice.modal.price10000"
                        defaultMessage="Price (order <10000m)"
                    >
                        {value => (
                            <span className={object.userData.orderQty < 10000 ? 'strong-text' : ''}>
                        {value}: {object.userData.price10000.toFixed(4)}€ / m
                    </span>
                        )}
                    </FormattedMessage>
                )}
                { object.userData.price30000 && (
                    <FormattedMessage
                        id="calculatePrice.modal.price30000"
                        defaultMessage="Price (order <30000m)"
                    >
                        {value => (
                            <span className={object.userData.orderQty >= 10000 && object.userData.orderQty < 30000 ? 'strong-text' : ''}>

                        {value}: {object.userData.price30000.toFixed(4)}€ / m

                    </span>
                        )}
                    </FormattedMessage>
                )}
                { object.userData.price50000 && (
                    <FormattedMessage
                        id="calculatePrice.modal.price50000"
                        defaultMessage="Price (order <50000m)"
                    >
                        {value => (
                            <span className={object.userData.orderQty >= 30000 && object.userData.orderQty < 50000 ? 'strong-text' : ''}>
                        {value}: {object.userData.price50000.toFixed(4)}€ / m
                    </span>
                        )}
                    </FormattedMessage>
                )}
                { object.userData.price50000 && (
                    <FormattedMessage
                        id="calculatePrice.modal.price50001"
                        defaultMessage="Price (order >50000m)"
                    >
                        {value => {
                            return (
                            <span className={object.userData.orderQty >= 50000 ? 'strong-text' : ''}>
                        {value}: Please contact us, to get a price estimate
                    </span>
                        )}
                        }
                    </FormattedMessage>
                )}
              <span className="profile col-sm-4 .col-md-4 .col-xs-4">
                {consoleUtils.getSvg(object)}
              </span>

              {checkObjects && checkObjects[i] && checkObjects[i].checked && (
                <div className="panel panel-default panel-options">
                  {CALCULATION_REGION === 'eu' && (
                    <Field
                    name={`objects[${i}].laserMarking`}
                    type="checkbox"
                    component={renderField}
                    label="Laser marking"
                  />)}
                  {CALCULATION_REGION === 'eu' && checkObjects[i] && checkObjects[i].laserMarking && (
                    <div>
                      <div className="form-group">
                        <label className="col-md-4 control-label">Type</label>
                        <div className="col-md-6">
                          <Field
                            name={`objects[${i}].type`}
                            component="select"
                            className="form-control input-md"
                          >
                            <option />
                            <option value="standart">Standart</option>
                            <option value="logo">Logo</option>
                          </Field>
                        </div>
                      </div>

                      <div className="form-group">
                        <label className="col-md-4 control-label">Color</label>
                        <div className="col-md-6">
                          <Field
                            name={`objects[${i}].color`}
                            component="select"
                            className="form-control input-md"
                          >
                            <option />
                            <option value="white">White</option>
                            <option value="grey">Grey</option>
                          </Field>
                        </div>
                      </div>
                    </div>
                  )}
                  {CALCULATION_REGION === 'eu' && (<Field
                    name={`objects[${i}].length`}
                    type="number"
                    component={renderField}
                    label="Length"
                    defaultVal={6}
                  />
                  )}

                  <Field
                    name={`objects[${i}].orderQty`}
                    type="number"
                    component={renderField}
                    label="Order quantity"
                    minOrderQty={object.userData.minOrderQty}
                    defaultVal={object.userData.minOrderQty}
                    onChange={(event, value) => {
                        object.userData.orderQty = parseInt(value);
                    }}
                  />
                </div>
              )}
            </li>
          );
        })}
    </ul>
  );
};

RenderObjects.propTypes = {
  objects: PropTypes.array,
  checkObjects: PropTypes.array
};

let OrderForm = props => {
  const { checkObjects } = props;
  return (
    <div className="row">
      <div>
        <form
          className="form-horizontal form-custom"
          onSubmit={values => {
            console.log(values);
          }}
        >
          <div>
            <legend>Objects information</legend>

            <FieldArray
              name="objects"
              component={RenderObjects}
              objects={props.objects}
              checkObjects={checkObjects}
            />
          </div>

          <div>
            <legend>Contact Information</legend>
            <Field
              name="firstName"
              type="text"
              component={renderContactField}
              label="First Name"
              icon="fa fa-user"
              defaultVal=""
            />
            <Field
              name="lastName"
              type="text"
              component={renderContactField}
              label="Last Name"
              icon="fa fa-male"
              defaultVal=""
            />
            <Field
              name="company"
              type="text"
              component={renderContactField}
              label="Company"
              icon="fa fa-institution"
              defaultVal=""
            />
            <Field
              name="addressCountry"
              type="text"
              component={renderContactField}
              label="Country"
              defaultVal=""
            />
            <Field
              name="addressCity"
              type="text"
              component={renderContactField}
              label="City"
              defaultVal=""
            />
            <Field
              name="addressStreet"
              type="text"
              component={renderContactField}
              label="Street"
              defaultVal=""
            />
            <Field
              name="zipCode"
              type="text"
              component={renderContactField}
              label="Zip Code/Zone"
              defaultVal=""
            />
            <Field
              name="phoneNumber"
              type="text"
              component={renderContactField}
              label="Phone number"
              icon="fa fa-phone"
              defaultVal=""
              // normalize={normalizePhone}
            />
            <Field
              name="emailAddress"
              type="email"
              component={renderContactField}
              label="Email address"
              icon="fa fa-envelope-o"
              defaultVal=""
            />
            <div className="form-group">
              <label className="col-md-4 control-label" htmlFor="comment">
                Сomment
              </label>
              <div className="col-md-4">
                <Field
                  name="comment"
                  component="textarea"
                  className="form-control"
                  rows="3"
                  placeholder="Your comment to the order"
                />
              </div>
            </div>
          </div>
          {/*<input type='submit' value='Form Submit button'/>*/}
        </form>
      </div>
    </div>
  );
};

OrderForm.propTypes = {
  objects: PropTypes.array,
  checkObjects: PropTypes.array
};

OrderForm = reduxForm({
  form: 'order',
  validate,
  destroyOnUnmount: false
})(OrderForm);

// Decorate with connect to read form values
const selector = formValueSelector('order'); // <-- same as form name

OrderForm = connect(state => {
  // can select values individually
  const checkObjects = selector(state, 'objects');
  // or together as a group
  // const { firstName, lastName } = selector(state, 'firstName', 'lastName')
  return {
    checkObjects
  };
})(OrderForm);

export default OrderForm;
